<template>
	<view class="bg_red">
		<view class="title">
			色弱小测试
		</view>
		<view class="game_main">
			<view class="time_score">
				<view class="time">
					<text>时间：</text>
					<text>{{countdown}}</text>
				</view>
				<view class="score">
					<text>得分：</text>
					<text>{{score}}</text>
				</view>
			</view>
			<view class="color_block_main">
				<view
					:style="{'background-color': (index == dataObject.specialColor_position ? dataObject.specialColor : dataObject.commonColor), 'width': dataObject.style.width, 'height': dataObject.style.height, 'border-radius': dataObject.style.border_radius, 'box-shadow': dataObject.style.box_shadow}"
					v-for="(item,index) in dataObject.blockCount" :key="index" @click="clickSpecial(index)">
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="countdown_end_mask" v-show="resultShow">
			<view class="title_success">
				测试成功
			</view>
			<view class="success_content">
				<view class="success_content_top">
					<text class="success_content_text">{{resultObject.text}}: </text>
					<text class="success_content_level">{{resultObject.level}}</text>
				</view>
				<view class="success_content_bottom">
					<uni-icons type="home-filled" size="30" class="home" @click="toHomePage"></uni-icons>
					<button size="30" @click="reRestart" class="restart_btn">再来一次</button>
					<button class="redo" open-type="share" @click="toShare">
						<uni-icons type="redo" size="30"></uni-icons>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		seruoDatas,
		seruoResultText,
		getRandomIntNum
	} from '../../static/js/seruoData.js';
	export default {
		data() {
			return {
				currentLevel: 0, // 当前关卡
				countdown: 60, // 倒计时
				score: 0, // 分数
				timer: null, // 定时器
				resultShow: false, // 倒计时结束后遮罩层显示
				resultObject: {
					index: 0,
					level: 'LV0',
					text: '无目之眼'
				}, // 最终测试结果
				dataObject: {
					index: 0,
					blockCount: 4,
					commonColor: '#3399cc',
					specialColor: '#0da6f2',
					specialColor_position: getRandomIntNum(4),
					style: {
						width: '160px',
						height: '160px',
						border_radius: '10px',
						box_shadow: '3px 3px 6px #848484'
					}
				}, // 等级0 分数0 的时候要展示的颜色块数量，特殊颜色块的颜色，以及特殊颜色块的位置
			}
		},
		onLoad() {
			// 显示加载中，500毫秒之后消失
			this.loading();
			// 将第一个数据对象取出来
			this.getFirstDataObject();
			// 加载分享菜单
			this.loadingShareMenu();
		},
		methods: {
			// 显示加载中，500毫秒之后消失
			loading() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				setTimeout(() => {
					uni.hideLoading();
					// 倒计时
					this.startCountdown();
				}, 500)
			},
			// 倒计时
			startCountdown() {
				if (!this.timer) {
					this.timer = setInterval(() => {
						if (this.countdown > 0 && this.countdown <= 60) {
							this.countdown--;
						} else {
							clearInterval(this.timer);
							this.timer = null;
							// 显示遮罩层，看多少等级
							this.getResult();
						}
					}, 1000)
				}
			},
			// 将第一个数据对象取出来
			getFirstDataObject() {
				// 当前关卡：0
				this.currentLevel = 0;
				this.dataObject = seruoDatas[0];

			},
			// 点击方块
			clickSpecial(index) {
				// 如果点击到了特殊颜色的方块，就到下一关
				if (index == this.dataObject.specialColor_position) {
					if (this.currentLevel == 30) {
						this.getResult();
					} else {
						this.currentLevel++;
						this.score++;
						this.dataObject = seruoDatas[this.currentLevel]
					}
				}
			},
			// 得到最终结果
			getResult() {
				this.resultShow = true;
				this.resultObject = seruoResultText[this.currentLevel];
			},
			// 去首页
			toHomePage() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			// 再来一次
			reRestart() {
				// 页面重载
				const pages = getCurrentPages()
				// 声明一个pages使用getCurrentPages方法
				const curPage = pages[pages.length - 1]
				// 声明一个当前页面
				curPage.onLoad(curPage.options) // 传入参数
				curPage.onShow()
				// 执行刷新
				curPage.onReady()
				this.resultShow = false;
				this.score = 0;
				this.currentLevel = 0;
				this.countdown = 60;
				this.getFirstDataObject();
			},
			// 加载分享菜单
			loadingShareMenu() {
				wx.showShareMenu({
					withShareTicket: true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"]
				})
			},
			// 去分享
			toShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "色弱测试，看你能到第几关，快来跟我一起玩吧！",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.bg_red {
		width: 100%;
		min-height: 100vh;
		background-color: #f06060;

		.title {
			width: 100%;
			font-size: 30px;
			font-weight: 700;
			padding-top: 50px;
			color: aliceblue;
			text-align: center;
		}

		.game_main {
			width: 92%;
			margin-top: 50px;
			margin-left: auto;
			margin-right: auto;

			.time_score {
				display: flex;
				justify-content: space-between;

				.time {
					font-size: 17px;
					color: aliceblue;
				}

				.score {
					font-size: 17px;
					color: aliceblue;
				}
			}

			.color_block_main {
				margin-top: 10px;
				width: 100%;
				height: 350px;
				border-radius: 10px;
				background-color: #fff;
				border: 6px solid #fff;
				position: relative;
				left: -7px;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				padding-top: 5px;

				.per_color_block {
					width: 160px;
					height: 160px;
					border-radius: 10px;
					box-shadow: 3px 3px 6px #848484;
				}
			}
		}

		.countdown_end_mask {
			position: absolute;
			left: 27px;
			top: 180px;
			width: 86%;
			height: 360px;
			background-color: #f17f14;
			opacity: 0.9;
			z-index: 999999;
			border-radius: 10px;

			.title_success {
				width: 100%;
				text-align: center;
				font-size: 40px;
				font-weight: 800;
				color: aliceblue;
			}

			.success_content {
				margin-top: 10px;
				width: 100%;
				height: 300px;
				background-color: #fff5d4;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border-bottom-right-radius: 10px;
				border-bottom-left-radius: 10px;

				.success_content_top {
					text-align: center;

					.success_content_text {
						font-size: 26px;
						color: #a15a19;
						font-weight: 600;
						margin-right: 10px;
					}

					.success_content_level {
						font-size: 26px;
						color: #a15a19;
						font-weight: 600;
					}
				}

				.success_content_bottom {
					display: flex;
					align-items: center;
					justify-content: space-evenly;

					.restart_btn {
						width: 140px;
						height: 50px;
						border-radius: 15px;
						background-color: #e9a62f;
						color: #ffffff;
						font-size: 20px;
						letter-spacing: 2px;
						font-weight: 600;
						position: relative;
						left: 30px;
					}

					.home {
						position: relative;
						left: 25px;
					}

					.redo {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						background-color: #fff5d4;
						text-align: center;

						uni-icons {
							position: relative;
							top: -10px;
						}
					}
				}
			}
		}
	}
</style>
